<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<view class="text_center mintop40 minbottom40">
			<image src="@/static/image/40.png" mode="" style="width: 180rpx;height: 160rpx;"></image>
		</view>
		<view class="min40 col0 size36 font600">
			注册
		</view>
		<view class="min40_rl">
			<view class="u-demo-block__content" style="margin-top: 15px;">
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入手机号" type="number" customStyle="background: #F6F6F6;border: #F6F6F6;"
					shape="circle" maxlength="11" v-model="phone">
				<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input placeholder="请输入手机号" type="number" customStyle="background: #F6F6F6;border: #F6F6F6;"
						shape="circle" maxlength="11" v-model="phone">
					<!-- #endif -->
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="onCode" :text="tips" shape="circle" color="#FF986B"
								customStyle="color: #442500;" hairline="false" size="small"></u-button>
						</template>
				<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			</view>
			<view class="mintop40">
				<u--input placeholder="请输入验证码" customStyle="background: #F6F6F6;border: #F6F6F6;" type="number"
					shape="circle" v-model="code"></u--input>
			</view>
			<view class="mintop40">
				<u--input placeholder="请输入密码" customStyle="background: #F6F6F6;border: #F6F6F6;" type="password"
					shape="circle" v-model="password"></u--input>
			</view>
			<view style="margin-top: 80rpx;">
				<u-button text="注册" shape="circle" color="linear-gradient( 63deg, #FF818A 0%, #FF9F6F 100%)"
					customStyle="color: #333;font-weight: 600;letter-spacing: 5px;" hairline="false" size="normal"
					@click="handleinput"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '发送验证码',
				referral_code: '',
				phone: '',
				code: '',
				password: '',
			}
		},

		onLoad(op) {
			if (op.usercode != 'undefined') {
				this.referral_code = op.usercode
			}

		},
		methods: {
			async getCode() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("/login/phone_code/" + this.phone)
				if (code == 1) {
					this.$com.toast(message)
					//初始数据

				} else {
					console.log(message);
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			handleinput() {
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (!this.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!strTemp.test(this.phone)) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else if (!this.code) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				} else if (!this.password) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				} else {

					this.getRegister();
					//第一个参数是 缓存的key值 就是说 这个缓存 存在storage 里面的名字
					// uni.setStorageSync('token', token);
				}
			},
			async getRegister() {

				let {
					code,
					message,
					data
				} = await this.$com.fetch("/login/user_registered", {
					phone: this.phone,
					verify_code: this.code,
					password: this.password,
					referral_code: this.referral_code != undefined ? this.referral_code : ''
				})
				var timeOut = 1000;
				if (code == 200) {
					this.$com.toast(message)
					setTimeout(() => {
						this.$jump.rel('/mypackage/user/login')
					}, timeOut)
				} else {
					uni.$u.toast(message);

				}
			},
			onCode() {
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (!this.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!strTemp.test(this.phone)) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
							this.getCode();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style scoped lang="less">
	.WeChat_image {
		text-align: center;
		border: none;
		background-color: #ffffff;
		border-radius: 50%;
		margin: auto;
		margin-top: 40rpx;

		&::after {
			border: none;
		}
	}
</style>